<template>
  <div class="app-container">
    <el-row :gutter="40">
      <el-col :span="4">
        <div class="head-container">
          <el-input
            v-model="folderName"
            :placeholder="$t('inputFolderName')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            ref="tree"
            :data="folderList"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="id"
            :default-expanded-keys="['request_log']"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-auth="['DELETE']"
              type="primary"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="currentFolderName===undefined"
              @click="handleDeleteFolder"
            >{{ $t("deleteFolder") }}</el-button>
          </el-col>
          <right-toolbar show-search.sync="false" @queryTable="getList" />
        </el-row>

        <el-table
          v-loading="loading"
          :data="logFileList"
          border
          @sort-change="sortChange"
        >
          <el-table-column
            :label="$t('logFolderName')"
            sortable
            prop="folder_name"
            width="150"
          />
          <el-table-column
            :label="$t('logFileName')"
            sortable
            prop="file_name"
            width="200"
          />
          <el-table-column
            :label="$t('logModificationTime')"
            prop="modification_time"
            sortable
            min-width="200"
          />
          <el-table-column
            :label="$t('logFileSize')"
            prop="file_size"
            sortable
            min-width="150"
          />
          <el-table-column
            :label="$t('operate')"
            align="center"
            width="200"
            class-name="fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                v-auth="['DOWNLOAD']"
                size="mini"
                type="text"
                icon="el-icon-download"
                @click="handleDownload(scope.row)"
              >{{ $t("downloadBtn") }}</el-button>
              <el-button
                v-auth="['DELETE']"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteLogFile(scope.row)"
              >{{ $t("deleteBtn") }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLogsDirectoryStructureApi, getLogsFileListApi, downloadLogFileApi, deleteLogFileApi, deleteLogFolderApi } from '../api/system.api'
export default {
  name: 'LogsList',
  data() {
    return {
      // 遮罩层
      loading: false,
      folderName: undefined,
      currentFolderName: undefined,
      folderList: [],
      logFileList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'id'
      },
      queryParams: {
        'folder': undefined
      },
      permissions: []
    };
  },
  watch: {
    folderName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.permissions = this.handleMenuPermission(this);
    this.getLogsDirectoryStructure()
  },
  methods: {
    async getLogsDirectoryStructure() {
      this.loading = true
      var resp = await getLogsDirectoryStructureApi()
      if (resp.success) {
        this.folderList = resp.data
        this.loading = false
      } else {
        this.loading = false
        this.targaMessageBox(this, resp.msg);
      }
    },
    async getList() {
      var resp = await getLogsFileListApi(this.queryParams)
      if (resp.success) {
        this.logFileList = resp.data
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    sortChange({ prop, order }) {
      var ordering;
      if (order === 'ascending') {
        ordering = '' + prop;
      } else if (order === 'descending') {
        ordering = '-' + prop;
      } else {
        ordering = undefined;
      }
      this.queryParams.ordering = ordering;

      this.getList();
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    async handleNodeClick(data) {
      this.currentFolderName = data.label
      const keys = Object.keys(data);
      if (!keys.includes('children')) {
        this.queryParams.folder = data.label
        await this.getList()
      }
    },
    async handleDeleteFolder() {
      var resp = await deleteLogFolderApi(this.queryParams)
      if (resp.success) {
        this.getLogsDirectoryStructure();
        this.logFileList = []
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    async handleDeleteLogFile(row) {
      var resp = await deleteLogFileApi({ 'folder': row.folder_name, 'filename': row.file_name })
      if (resp.success) {
        this.getList();
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    },
    async handleDownload(row) {
      var resp = await downloadLogFileApi({ 'folder': row.folder_name, 'filename': row.file_name })
      if (resp.success) {
        const a = document.createElement('a')
        a.href = resp.data.log_file
        a.click()
      } else {
        this.targaMessageBox(this, resp.msg);
      }
    }
  }
};
</script>
